@import url('./common.less');
.returnTop{
    position: fixed;
    bottom: 20px;
    right: 20px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: none;
    // background-color: #3498DB;
    background: url(../img/arrow-top.png) no-repeat center center;
}
.returnTop:hover{
    background-color: #D4DDE3;
}

.container {
    width: 100%;
    background-color: @base-color;
    padding-bottom: 80px;
    height: auto;
    .slider-wrapper {
        width: 100%;
        height: 400px;
        padding-top: 20px;
        margin:0 auto;
        .slider {
            width: 1190px;
            height: 400px;
            margin: 0 auto;
            .slider-img {
                width: 1190px;
                display: block;
                margin: 0 auto;
            }
        }
        .pre {
            position: absolute;
            left: 120px;
            top: 30%;
            width: 41px;
            height: 69px;
            background-image: url(../img/icon-slides.png);
            background-position: -83px 0;
            cursor: pointer;
        }
        .pre:hover {
            background-position: 0 0;
        }
        .next:hover {
            background-position: -42px 0;
        }
        .next {
            position: absolute;
            right: 120px;
            top: 30%;
            width: 41px;
            height: 69px;
            background-image: url(../img/icon-slides.png);
            background-position: -124px 0;
            cursor: pointer;
        }
    }
    .cl-pos {
        width: 100%;
        .cl-pos-ct {
            float: none;
            width: @base-width;
            margin: 0 auto;
            height: 60px;
            li {
                list-style: none;
                a {
                    text-decoration: none;
                }
                float: left;
            }
            .homepage-advise {
                display: block;
                border-radius: 20px;
                color: #3498DE;
                font-size: 14px;
                text-align: center;
                padding: 12px 17px;
                font-weight: bold;
                border: 1px solid #3498DE;
                margin-right: 20px;
                margin-top: 10px;
            }
            .ccl-pos-item {
                color: #7C7C7C;
                display: block;
                padding: 10px 30px;
                margin-top: 10px;
            }
            .ccl-pos-item:hover {
                color: #3498DE;
            }
            .cl-pos-right {
                background-color: #FFF7E7;
                float: right;
                padding: 5px 30px;
                border-radius: 20px;
                box-shadow: 2px 2px 5px lightslategray;
                margin-top: 10px;
                .p-title {
                    display: block;
                    color: #6B3612;
                    text-align: center;
                    font-size: 14px;
                    margin-top: 9px;
                    margin-right: 10px;
                }
                img {
                    margin-top: 5px;
                }
            }
        }
    }
    .waterfall-wrapper {
        width: 100%;
        .waterfall {
            width: 1230px;
            margin: 0 auto;
            column-count: 4;
            column-gap: 0.1em;
            overflow: hidden;
            .item {
                .info-img {
                    transition: transform 0.5s;
                }
                .info-img:hover {
                    transform: scale(1.05, 1.05);
                }
                // margin: 0 -8px 0 -8px;
                break-inside: avoid;
                padding: 20px 20px 20px 20px;
                border-radius: 5px;
                img {
                    width: 100%;
                    margin-bottom: 10px;
                }
                .info {
                    .title {
                        margin-top: -10px;
                        color: #34495e;
                    }
                    .wf-cl-mtn {
                        margin-top: 10px;
                        li {
                            list-style: none;
                            float: left;
                        }
                        .wf-cl-mtn-item {
                            width: 80%;
                            color: #9AABB8;
                            font-size: 14px;
                            max-height: 44px;
                        }
                    }
                }
                .wf-cl-mtn-wrapper {
                    // width: 100%;
                    height: 39px;
                    margin-top: 20px;
                    ul {
                        float: left;
                        li {
                            float: left;
                        }
                        // float: left;
                    }
                    .wf-cl-mtn-header {
                        // display: block;
                        // width: 20%;
                        // margin-left: -20px;
                        float: left;
                        .wf-cl-mtn-header-img {
                            width: 35%;
                            // margin-left: -45px;
                        }
                    }
                    .wf-cl-mtn-content {
                        float: left;
                        .wf-cl-mtn-author {
                            display: block;
                            margin-left: -30px;
                            font-size: 13px;
                            color: #34495E;
                        }
                    }
                }
                .waterfall-wrapper {
                    float: left;
                    margin-right: 45px;
                }
            }
            .item:hover {
                background-color: white;
            }
        }
    }
    .page-num-wrapper {
        width: 100%;
        .page-num-ct {
            width: @base-width;
            margin: 0 auto;
            // height: 300px;
            .page-num-ct-cl {
                width: 300px;
                margin: 0 auto;
                padding-left: 40px;
                li {
                    float: left;
                }
                .page-num-ct-cl-item {
                    display: block;
                    border: 1px solid #C5CBCF;
                    border-radius: 50%;
                    padding: 10px 20px;
                    margin-right: 20px;
                    line-height: 30px;
                    color: #D8DCDE;
                }
                .page-num-ct-cl-item:hover {
                    .page-num-ct-cl-item-active
                }
                .page-num-ct-cl-item-active {
                    border: 1px solid #2D3E4F;
                    font-weight: bold;
                    color: #2D3E4F;
                }
                .page-num-ct-cl-item-other {
                    .page-num-ct-cl-item;
                    padding: 10px 18px;
                }
            }
        }
    }
}

.article {
    background-color: white;
    width: 100%;
    height: 1150px;
    margin-bottom: 100px;
    .at-ct {
        margin: 40px auto;
        width: @base-width;
        height: 200px;
        .at-ct-l {
            .at-l-title {
                color: #2D3E4F;
                margin-left: 0;
                .at-l-title-item {
                    margin-right: 20px;
                    color: #7C7C7C;
                    font-size: 14px;
                }
                font-size: 18px;
                margin-bottom: 40px;
            }
            .at-l-title-active {
                font-weight: bold;
                color: #3498DB;
                margin-right: 20px;
                border: 1px solid #3498DB;
                border-radius: 20px;
                padding: 10px 15px;
                font-size: 14px;
            }
            .at-l-title-active:hover,.at-l-title-item:hover{
                color: #3498DE;
            }
            .at-l-list {
                float: left;
                margin-top: -30px;
                margin-left: -30px;
                .al-l-list-item {
                    position: relative;
                    height: 120px;
                    width: 830px;
                    margin-left: 200px;
                    li {
                        float: left;
                        margin-right: 10px;
                        p {
                            font-size: 12px;
                            max-height: 44px;
                        }
                    }
                    .al-l-list-item-img {
                        transition: transform 0.5s;
                    }
                    .al-l-list-item-img:hover {
                        transform: scale(1.05, 1.05);
                    }
                    border: 3px solid white;
                    border-bottom: 3px solid #E0E7EB;
                    margin: 10px 10px;
                    padding: 20px 20px;
                    .tag-blue {
                        display: block;
                        float: left;
                        border: 1px solid #3498DB;
                        border-radius: 5px;
                        background-color: #3498DB;
                        color: white;
                        font-weight: bold;
                        width: 55px;
                        padding: 4px 9px;
                        text-align: center;
                        font-style: 12px;
                        cursor: pointer
                    }
                    .tag {
                        font-size: 18px;
                        margin-left: 5px;
                        cursor: pointer
                    }
                    .tag:hover {
                        color: #3498DB;
                    }
                    .cl-h1 {
                        font-style: 24px;
                        // width: 440px;
                        line-height: 27px;
                        p {
                            word-wrap: break-word;
                            word-break: break-word;
                            overflow: hidden;
                            font-size: 14px;
                            max-height: 44px;
                            margin-top: 5px;
                        }
                        .c1-h1-ct {
                            margin-left: 180px;
                            margin-top: -125px;
                        }
                    }
                    .date {
                        float: right;
                        color: #7f8c8d;
                        line-height: 20px;
                        .date-img {
                            position: absolute;
                            right: 90px;
                            top: 17px;
                        }
                    }
                }
                .page-num-ct {
                    width: 100%;
                    margin: 0 auto;
                    .page-num-ct-cl {
                        width: 300px;
                        margin: 0 auto;
                        padding-left: 40px;
                        li {
                            float: left;
                        }
                        .page-num-ct-cl-item {
                            display: block;
                            border: 1px solid #C5CBCF;
                            border-radius: 50%;
                            padding: 10px 20px;
                            margin-right: 20px;
                            line-height: 30px;
                            color: #D8DCDE;
                        }
                        .page-num-ct-cl-item:hover {
                            .page-num-ct-cl-item-active
                        }
                        .page-num-ct-cl-item-active {
                            border: 1px solid #2D3E4F;
                            font-weight: bold;
                            color: #2D3E4F;
                        }
                        .page-num-ct-cl-item-other {}
                    }
                }
                .al-l-list-item:hover {
                    border: 3px solid #3498DB;
                }
            }
        }
        .at-ct-r {
            float: right;
            width: 280px;
            // height: 300px;
            margin-top: -65px;
            .at-r-aside {
                box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
            }
            // margin-right: 20px;
            // background-color: red;
            .at-r-title {
                margin-bottom: 40px;
                font-size: 14px;
                color: #7C7C7C;
            }
            .at-r-position {}
            .more {
                display: block;
                margin: 2px auto;
                margin-bottom: 40px;
                width: 43px;
                height: 36px;
                font-size: 12px;
                color: #7f8c8d;
                text-align: center;
                line-height: 28px;
                border: 1px solid #E2E7EB;
                background-color: #E2E7EB;
            }
        }
    }
}

.wpn {
    width: 100%;
    background-color: @base-color;
    height: 1200px;
    margin-top: 80px;
    .wpn-ct {
        width: @base-width;
        margin: 0 auto;
        height: 680px;
        border-bottom: 1px solid #E0E7EB;
        .h-novice-first{
            .h-novice;
            width: 334px;
        }
        .h-novice {
            // display: block;
            float: left;
            width: 280px;
            height: 100px;
            margin-top: 20px;
            background-color: #fff;
            img:not(:first-child){
                margin-top:-3.5px;
            }
            .list{
                border: 4px solid #3498DB;
                display: block;
                margin-top: -10px;
                padding: 12px 20px 0;
                font-size: @base-font-size;
                list-style-position: outside; 
                a{
                    color: #7C7C7C;
                    display: block;
                    height: 32px;
                    font-size: 14px;
                    color: #7c7c7c;
                    line-height: 22px;
                    text-indent: 10px;
                }
            }
        }
    }
    .wpn-ct-num{
        height: 200px;
        width: @base-width;
        margin: 0 auto;
        height: 80px;
    }
    .designer{
        height: 200px;
        border-bottom: 1px solid #E0E7EB;
        width: @base-width;
        margin: 0 auto;
        height: 220px;
        .cont{
            float: left;
            width: 210px;
        }
        .avatar{
            float: left;
            margin-right: 10px;
        }
        li{
            display: block;
            float: left;
            width: 297px;
            padding-top: 20px;
            min-height: 82px;
        }
    }
    .company{
        height: 200px;
        width: 1200px;
        margin: 0 auto;
        height: 220px;
        li{
            float: left;
        }
        .h-tit{
            font-size: 14px;
            color: #34495e;
            height: 40px;
            line-height: 40px;
            margin: 28px 0 10px;
        }
        .text{
            margin: 40px -15px 40px;
            a{
                display: block;
                font-size: 16px;
                margin: 0 15px;
                color: #2C3E50;
            }
            padding-top: 40px;
        }
    }
    .at-l-title {
        // margin-top: 450px;
        padding-top: 20px;
        .at-l-title-active {
            .article .at-ct .at-ct-l .at-l-title-active
        }
        .at-l-title-item {
            .article .at-ct .at-ct-l .at-l-title .at-l-title-item
        }
        .at-l-title-active:hover,.at-l-title-item:hover{
            color: #3498DE;
        }
    }
}